<!--
 * @FilePath: /fxfzywpt/src/views/riskZonation/components/MutilLegend.vue
 * @Description: 
-->

<template>
  <div class="legend">
    <div class="legend-list">
      <div class="legend-column" v-for="(column, columnIndex) in columns" :key="columnIndex">
        <div class="legend-title">{{ props.titles[columnIndex].title }}</div>
        <div class="legend-sub-title">{{ props.titles[columnIndex].subTitle }}</div>

        <div class="legend-item" v-for="(item, itemIndex) in column" :key="itemIndex">
          <div
            class="legend-color"
            :style="{
              backgroundColor: item.color,
              width: item.w + 'px',
              height: item.h + 'px',
              borderRadius: item.r + '%',
            }"
          ></div>
          <div class="legend-label">{{ item.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue';

const props = defineProps({
  titles: Array,
  items: Array,
  itemsPerColumn: {
    type: Number,
    default: 10,
  },
});

const columns = computed(() => {
  const columns = [];
  for (let i = 0; i < props.items.length; i += props.itemsPerColumn) {
    columns.push(props.items.slice(i, i + props.itemsPerColumn));
  }
  return columns;
});
</script>

<style scoped>
.legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 1;
}

.legend-title {
  white-space: nowrap;
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 23px;
  margin-bottom: 10px;
  margin-top: -10px;
}

.legend-sub-title {
  white-space: nowrap;
  font-size: 12px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 23px;
}
.legend-list {
  display: flex;
  margin-top: 15px;
}

.legend-column {
  flex: 1;
  margin-right: 20px;
}

.legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
}

.legend-color {
  width: 15px;
  height: 8px;
  margin-right: 10px;
}

.legend-label {
  font-size: 8px;
  white-space: nowrap;
  font-family: Helvetica Neue LT Pro-55 Roman, Helvetica Neue LT Pro;
  font-weight: normal;
  color: #939bb4;
  line-height: 23px;
}
</style>
